import React, { PureComponent } from "react"
import { CSSTransition } from "react-transition-group"
import "./style.css"

export class App extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            isShowTitle: true,
        }
    }
    render() {
        const { isShowTitle } = this.state
        return (
            <div>
                <button onClick={(e) => this.setState({ isShowTitle: !isShowTitle })}>切换</button>
                {/* timeout决定什么时候取消类名 */}
                <CSSTransition
                    in={isShowTitle}
                    unmountOnExit={true}
                    classNames="coding"
                    timeout={2000}
                    appear
                    onEnter={e=> console.log("开始进入动画")}
                    onEntering={e => console.log("正在执行进入动画")}
                    onEntered={e => console.log("执行进入结束")}
                    onExit={e => console.log("开始进入动画")}
                    onExited={console.log("离开结束")}
                >
                    <h2>哈哈哈</h2>
                </CSSTransition>
            </div>
        )
    }
}

export default App
